<template>
  <div class="c-circle-button">
    <i class="c-circle-button__icon" v-if="props.type">
      <svg class="icon svgfont" aria-hidden="true">
        <use :xlink:href="xlinkHref"></use>
      </svg>
    </i>
  </div>
</template>

<script lang="ts" setup name="">
import { defineProps, computed } from 'vue';
const props = defineProps({
  type: {
    type: String
  }
});
const xlinkHref = computed(() => {
  return `#${props.type}`;
});
</script>

<style lang="scss" scoped>
.c-circle-button {
  width: 32px;
  height: 32px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0px 4px 8px 0px rgba(64, 83, 122, 0.08);
  border: 1px solid #ebeff2;
  border-radius: 16px;
  color: #96a7b3;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  &:hover {
    color: #03ac82;
  }
  .c-circle-button__icon {
    font-size: 24px;
    height: 24px;
    .icon {
      width: 1em;
      height: 1em;
      vertical-align: 0;
      fill: currentColor;
      overflow: hidden;
    }
  }
}
</style>
